<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>车型编辑</h5>

                    </div>
                    <div class="ibox-content">
                        <form method="get" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">品牌</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b"
                                            v-on:change="getFactories()"
                                            v-model="selected_brand_id">
                                        <option v-for="brand in brands" v-bind:value="brand.id" >
                                            {{brand.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">主机厂</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b"
                                            v-on:change="getModels()"
                                            v-model="selected_factory_id" >
                                        <option v-for="factory in factories" v-bind:value="factory.id" >
                                            {{factory.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">车系</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b"
                                            v-model="selected_model_id" >
                                        <option v-for="model in models" v-bind:value="model.id" >
                                            {{model.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.name' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">年份</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.year' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">排量</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.engine_displacement' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">档位</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.gearbox_lv' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">变速箱</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.gearbox_type' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">发动机描述</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.engine' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">原始数据油品</label>

                                <div class="col-sm-10">
                                    <div class="form-control">{{model_object.oil}}</div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">建议使用油品</label>

                                <div class="col-sm-10">
                                    <select class="form-control m-b"
                                            v-model="selected_oil_id" >
                                        <option v-for="oil in oils" v-bind:value="oil.id" >
                                            {{oil.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">原厂出装量</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.oil_regional' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">循环机更换量</label>

                                <div class="col-sm-10">
                                    <input type="text" v-model='model_object.oil_change' class="form-control">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">MI_KEY</label>

                                <div class="col-sm-10">
                                    <div class="form-control">{{model_object.mi_key}}</div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a class="btn btn-primary" v-on:click="model_object_edit()" >保存内容</a>
                                    <!--<button class="btn btn-white" type="submit">取消</button>-->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../config'
    export default{
        name : 'model_object_edit',
        model_object_id : 0,
//        brand:{
//            'name':'',
//            'letter_pre':''
//        },
        data () {
            return {
                model_object:{
                    'name':'',
                    'factory_id':'',
                    'brand_id':'',
                    'model_id':'',
                    'year':'',
                    'engine_displacement':'',
                    'gearbox_lv':'',
                    'gearbox_type':'',
                    'engine':'',
                    'oil':'',
                    'oil_change':'',
                    'oil_regional':'',
                    'mi_key':'',
                },
                selected_brand_id:0,
                selected_factory_id:0,
                selected_model_id:0,
                selected_oil_id:0,
                brands:[],
                factories:[],
                models:[],
                oils:[],
                getModelObject : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/model_object/' + this.model_object_id + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
//                        xhrFields:"'Access-Control-Allow-Origin': '*'",
                        success:function( json ){
                            if( json.status == undefined || json.status == 0 ) {
                                t.model_object = $.extend(t.model_object,json);
                                console.log( json );
                                console.log( t.model_object );
//                                t.selected_factory_id = t.model_object.factory_id;

                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                            t.getBrands();
                            t.getAllOils();
                        }
                    });

                }
                ,model_object_edit : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/model_object/' + this.model_object_id + '/edit' + '?api_token=' + api_token;
                    var t = this;
                    t.model_object.brand_id = t.selected_brand_id;
                    t.model_object.factory_id = t.selected_factory_id;
                    t.model_object.model_id = t.selected_model_id;
                    t.model_object.oil_id = t.selected_oil_id;
                    $.ajax({
                        type: "post",
                        url: url,
                        dataType: 'json',
                        data: t.model_object,
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ) {
                                alert('保存成功');
                                location.href = '#/model_object';
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getBrands : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/brands' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.length; i ++){
                                    t.brands.push( json[i]);
                                }
                                t.selected_brand_id = t.model_object.brand_id;
                                t.getFactories();
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getFactories : function( ){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/factories' + '?api_token=' + api_token;
                    if( this.selected_brand_id != '' && this.selected_brand_id != 0 ){
//                    if( this.model_object.brand_id != '' && this.model_object.brand_id != 0 ){
                        url += '&brand_id=' + this.selected_brand_id;
                    }
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ){
                                t.factories = [];
                                for(var i =0;i < json.list.length; i ++){
                                    t.factories.push( json.list[i]);
                                }
                                t.selected_factory_id = t.model_object.factory_id;
                                t.getModels();
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getModels : function( ){
                    var api_token = localStorage.getItem('api_token');
                    var url =  config.api_url + '/backend/models' + '?api_token=' + api_token;
                    if( this.selected_factory_id != '' && this.selected_factory_id != undefined ){
                        url += '&factory_id=' + this.selected_factory_id;
                    }else{
                        return;
                    }
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){

                            if( json.status == undefined || json.status == 0 ){
                                t.models = [];
                                for(var i =0;i < json.list.length; i ++){
                                    t.models.push( json.list[i]);
                                }
                                t.selected_model_id = t.model_object.model_id;
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }
                        }
                    });
                }
                ,getAllOils : function(){
                    var api_token = localStorage.getItem('api_token');
                    var url = config.api_url + '/backend/oil/all' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: {},
                        xhrFields:true,
                        success:function( json ){
                            t.list = [];
                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.length; i ++){
                                    json[i].url = '#/oil/'+json[i].id + '/edit';
                                    t.oils.push( json[i] );
                                }
                            }
                            t.selected_oil_id = t.model_object.oil_id;
                        }
                    });
                }
            }
        }
        ,created: function(){
            this.model_object_id = this.$route.params.id;
            this.getModelObject();

        }

    }
</script>

